<template>
    <div class="box">
        <h1>组件间通信7: $refs & $children & $parent</h1>

        <p>BABA有存款: {{ money }}</p>
        <button @click="borrowMoneyFormSon">找儿子借钱100</button><br />
        <button @click="borrowMoneyFormDaughter">找女儿借钱150</button><br />
        <button @click="borrowMoneyFormChild">找所有孩子借钱200</button><br />

        <br />
        <Son ref="son" />

        <br />
        <Daughter ref="daughter" />
    </div>
</template>

<script>
// $ref
//      可以通过$refs拿到组件实例,拿到组件实例就可以操作组件中的数据
// $children
//      获取到当前组件的所有子组件组成的数组,数组通过遍历可以拿到每个子组件
// $parent
//      获取到当前组件的父组件
//      注意:
//      $parent 慎用,为什么? 有可能这个组件有多个爹(多个不通的组件在使用子组件,每个组件中的数据是不一样的)
// 总结:
//      在vue2中,只要获取到组件实例,就可以修改组件内的数据
import Son from "./Son";
import Daughter from "./Daughter";
export default {
    name: "ChildrenParentTest",
    data() {
        return {
            money: 1000,
        };
    },
    components: {
        Son,
        Daughter,
    },
    methods: {
        // 找儿子借钱
        borrowMoneyFormSon() {
            // 自己的钱增多
            this.money += 100;
            // 儿子的钱减少
            // this.$refs.son  -->  son 这个子组件
            this.$refs.son.money -= 100;
        },
        // 找女儿借钱
        borrowMoneyFormDaughter() {
            this.money += 150;

            this.$refs.daughter.money -= 150;
        },
        borrowMoneyFormChild() {
            this.money += 200;

            // console.log(this.$children)

            this.$children.forEach(child => {
                // child 每个子组件
                child.money -= 100;
            })

        }
    }
};
</script>

<style>
</style>
